import React, { Component } from 'react';
import { Grid, Rating, Feedback } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import { getBarOption } from '../../echarts-figures.js';
import { GetUrlParam } from '../../baseConfig';
import './Comprehensive.scss';

var echarts = require('echarts');
const { Row, Col } = Grid;
const Toast = Feedback.toast;

@DataBinder({
  RDChartData: {
    //url: `${global.constants.GOLDEYEGETHOST}cattle/jianda_overiew`,
    url: `${global.constants.GOLDEYEGETHOST}cattle/comprehensive_evaluation`,
    type: 'get',
    // defaultBindingData: {}
  },
})
export default class Comprehensive extends Component {
  static displayName = 'Comprehensive';

  constructor(props) {
    // console.log("Home",props);
    super(props);
    this.state = {
      machineCode: localStorage.getItem("TOKEN") ? localStorage.getItem("TOKEN") : '',
      RDChartID:'RDChart',
      chart_ready:true,
      chart_red:false,
      desc_info:'', //指标解释
      complex_score:'00.00', //综合分数
      current_score:'00.00', //本期分数
      industry_rank:'00/00', //行业排名
      star_complex:0,
      star_current:0,
      star_industry:0,
      numbers:{}
    };
  }

  componentDidMount(){
    this.getChart();
  }

  getChart(){
    //柱状图
    this.props.updateBindingData('RDChartData',{
      'params': {
        secu_code:GetUrlParam("secu_code")
        // secu_code:localStorage.getItem("TOKEN")
      }
    }, (res) => {
      console.log("res",res)
      if(res.flag){
        let industry = res.data.charts.filter((c) => {
          return c.name === '行业均值';
        })
        industry = industry.length > 0 ? industry[0].values : [];
        let own = res.data.charts.filter((c) => {
          return c.name === '无叠加'; // 本期评分
        })
        own = own.length > 0 ? own[0].values : [];
        this.setState({
          chart_red:true,
          desc_info:'综合评价指标解释：该模块展示了传统的多维度经典财务分析框架。模块最终展示的财务得分是在考量了目标公司“偿债能力”、“运营能力”、“现金流健康状况”、“盈利能力”和“成长能力”五大维度状况后综合计算产生的。该财务评分系统针对上述每一维度分别采纳了5～10个不同财务指标进行赋权打分。财务指标既涵盖了ROE、已获利息倍数等这样经典的财务指标，也加入了简答数据研究团队经开发检验的自创财务指标。综合评分将基于全市场比对产生。得分越高，表明目标公司在上述六大维度中综合表现理想。得分越低，表明目标公司在上述六大维度中整体表现较差，原因可能是各维度均有小幅恶化，亦可能是某一维度出现急剧恶化。', //指标解释
          complex_score:res.data.data.scores.overallScore, //综合分数
          current_score:res.data.data.scores.thisScore, //本期分数
          industry_rank:res.data.data.scores.rank, //行业排名
          // desc_info:data.data.desc_info, //指标解释
          // complex_score:data.data.score_info.complex_score, //综合分数
          // current_score:data.data.score_info.current_score, //本期分数
          // industry_rank:data.data.score_info.industry_rank, //行业排名
          numbers:getBarOption(
            '传统财务得分',
            res.data.x,
            industry,
            own
            // data.data.data.industry_data,
            // data.data.data.own_data,
          )
        })

        this.initChart(this.state.numbers,this.state.RDChartID);
      }else{
        this.show(res.msg)
      }
    });
  }

  //公共图表
  initChart(config) {
    // console.log("chartID",echarts.getInstanceByDom(document.getElementById(this.state.RDChartID)))
    let myChart = echarts.getInstanceByDom(document.getElementById(this.state.RDChartID));
    if( myChart === undefined){
        myChart = echarts.init(document.getElementById(this.state.RDChartID));
    }
    myChart.setOption(config);

    window.addEventListener('resize',()=>{
      myChart.resize();
    });
  }

  show = (content) => {
    Toast.show({
      type: "error",
      content: content,
      afterClose: () => console.log("")
    });
  };

  render() {

    return (
      <div className="home-page" style={{paddingTop:'0',borderTop:'1px solid #f1f1f1'}}>
        <Row className="demo-row">
          <Col span="8">
            <div className="demo-col-inset">
              <div style={{display:'inline-flex'}}>
                <div className="left-card"><img src="./assetc/zhl.png" /></div>
                <div className="right-card">
                  <div className="small-title">综合评分</div>
                  <div className="number">{this.state.complex_score}</div>
                  <div><Rating value={Number(this.state.complex_score)/20} disabled /></div>
                </div>
              </div>
            </div>
          </Col>
          <Col span="8">
            <div className="demo-col-inset">
              <div style={{display:'inline-flex'}}>
                <div className="left-card"><img src="./assetc/zhr.png" /></div>
                <div className="right-card">
                  <div className="small-title">本期分数</div>
                  <div className="number">{this.state.current_score}</div>
                  <div><Rating value={Number(this.state.current_score)/20} disabled /></div>
                </div>
              </div>
            </div>
          </Col>
          <Col span="8">
            <div className="demo-col-inset">
              <div style={{display:'inline-flex'}}>
                <div className="left-card"><img src="./assetc/hy.png" /></div>
                <div className="right-card">
                  <div className="small-title">行业排名</div>
                  <div className="number">{this.state.industry_rank}</div>
                  {/* <div>--</div> */}
                </div>
              </div>
            </div>
          </Col>
        </Row>

        <IceContainer style={{margin:'20px 0', borderRadius:'0'}}>
          <div className="title"><div className="kk"></div>传统财务得分</div>
          <div className="left-chart-box">
            <div id={this.state.RDChartID} style={{width: "100%", height: "100%",marginTop:'20px'}}></div>
            {/* <Loading style={{display: 'block'}} visible={this.state.chart_ready} shape="fusion-reactor" color="#fff"></Loading> */}
          </div>
        </IceContainer>

        <IceContainer style={{margin:'20px 0', borderRadius:'0'}}>
          <div className="title"><div className="kk"></div>指标解释</div>
          <div className="desc_info">
            {this.state.desc_info}
          </div>
        </IceContainer>
      </div>
    );
  }
}
